<template>
	<view style="padding: 10px 20px;display: flex;flex-direction: column;">
		<uni-card>
			<template v-slot:title>
				<view style="padding: 15px;display: flex;justify-content: space-between;align-items: center;">
					<view style="display: flex;flex-direction: column;">
						<text style="font-size: large;font-weight: bold;">调价单</text>						
						<view style="display: flex;gap: 10px;color: #a1a1a1;font-size: small;">
							<text>结算价:￥{{(data.setprice/100).toFixed(2)}}</text>
							<text>指导价:￥{{(data.money/100).toFixed(2)}}</text>
							<text>会员价:￥{{(data.price/100).toFixed(2)}}</text>
						</view>
					</view>
					<view style="display: flex;gap: 10px;">
						<view class="gl-button gl-button-base" @tap="actionsClick('new')">
							<uni-icons type="folder-add" size="18" color="#fff"></uni-icons>
							<text style="font-size: small;">调价单</text>
						</view>
						<view class="gl-button gl-button-base" @tap="actionsClick('reload')">
							<uni-icons type="reload" size="18" color="#fff"></uni-icons>
							<text style="font-size: small;">刷新</text>
						</view>
					</view>
				</view>
			</template>
			<scroll-view class="gl-media-view" scroll-y="true" :style="{maxHeight:swiperH+'px'}">
				<uni-table type="selection" emptyText="暂无更多数据">
					<uni-tr>
						<uni-th align="center" width="30">ID</uni-th>
						<uni-th width="120">结算价</uni-th>
						<uni-th width="120">指导价</uni-th>
						<uni-th width="120">会员价</uni-th>
						<uni-th>生效时间</uni-th>
						<uni-th>截止时间</uni-th>
						<uni-th>会员折扣</uni-th>
						<uni-th>新人专享</uni-th>
						<uni-th></uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in priceData" :key="index">
						<uni-td align="center" width="30">{{item.id}}</uni-td>
						<uni-td>{{(item.setprice/100).toFixed(2)}}</uni-td>
						<uni-td>{{(item.money/100).toFixed(2)}}</uni-td>
						<uni-td>{{(item.price/100).toFixed(2)}}</uni-td>
						<uni-td>{{item.start_time}}</uni-td>
						<uni-td>{{item.over_time === null?'长期':item.over_time}}</uni-td>
						<uni-td>
							<switch :checked="Boolean(item.is_level)" disabled style="transform:scale(0.7)" />
						</uni-td>
						<uni-td>
							<switch :checked="Boolean(item.is_fresh)" disabled style="transform:scale(0.7)" />
						</uni-td>
						<uni-td>
							<uni-icons v-if="data.id === item.id" type="undo-filled" size="24"
								color="#dd524d"></uni-icons>
						</uni-td>
					</uni-tr>
				</uni-table>
			</scroll-view>
			<view class="gl-footer">
				<uni-pagination :show-icon="true" :total="count" :pageSize="size" v-model="page" title="翻页"
					@change="refresh" />
			</view>
		</uni-card>


		<!-- popup模态窗口 -->
		<uni-popup ref="popupView" type="center" animation borderRadius="10px 10px 0 0">
			<view class="gl-popup-view">
				<view class="gl-popup-title">
					<view class=""> 新调价单 </view>
					<uni-icons class="gl-button-mini gl-button-error" type="closeempty" size="18" color="#fff"
						@tap="PopupClose"></uni-icons>
				</view>
				<view class="gl-popup-body" style="display: flex;flex-direction: column;gap: 10px;">
					<view style="display: flex;align-items: center;gap: 10px;">
						<view class="">开始时间:</view>
						<uni-datetime-picker type="datetime" v-model="curPrice.start_time" style="width: 260px;" />
					</view>
					<view v-if="!Boolean(curPrice.is_long)" style="display: flex;align-items: center;gap: 10px;">
						<view class="">结束时间:</view>
						<uni-datetime-picker type="datetime" v-model="curPrice.over_time" style="width: 260px;" />
					</view>
					<view style="display: flex;align-items: center;gap: 10px;">
						<view class="">结算价格:</view>
						<uni-easyinput v-model="curFixRency" type="digit" trim placeholder="请输入结算价"
							style="width: 260px;" @change="e=>{EventPopupChange(e, 'rency')}" />
					</view>
					<view style="display: flex;align-items: center;gap: 10px;">
						<view class="">指导价格:</view>
						<uni-easyinput v-model="curFixMoney" type="digit" trim placeholder="请输入官方指导价"
							style="width: 260px;" @change="e=>{EventPopupChange(e, 'money')}" />
					</view>
					<view style="display: flex;align-items: center;gap: 10px;">
						<view class="">会员价格:</view>
						<uni-easyinput v-model="curFixPrice" type="digit" trim placeholder="请输入会员价"
							style="width: 260px;" @change="e=>{EventPopupChange(e, 'price')}" />
					</view>
					<view style="display: flex;align-items: center;gap: 10px;">
						<label>长期有效：
							<switch :checked="Boolean(curPrice.is_long)" style="transform:scale(0.7)"
								@change="e=>{EventPopupChange(e, 'long')}" />
						</label>
						<label>会员折扣：
							<switch :checked="Boolean(curPrice.is_level)" style="transform:scale(0.7)"
								@change="e=>{EventPopupChange(e, 'level')}" />
						</label>
						<label>新人专享：
							<switch :checked="Boolean(curPrice.is_fresh)" style="transform:scale(0.7)"
								@change="e=>{EventPopupChange(e, 'fresh')}" />
						</label>
					</view>
					<view
						style="height: 80px;display: flex;flex-direction: column;gap: 10px;color: #a1a1a1;font-size: small;">
						<text>会员折扣: 允许会员等级折扣结算。</text>
						<text>新人专享: 仅新客户专享。</text>
					</view>
				</view>
				<view class="gl-popup-foot" style="display: flex;justify-content: flex-end;gap: 10px;">
					<view class="gl-button gl-button-base" @tap="EventPopup('save')">
						<uni-icons type="checkmarkempty" size="18" color="#fff"></uni-icons>
						<text style="font-size: small;">保存</text>
					</view>
					<view class="gl-button gl-button-warning" @tap="PopupClose">
						<uni-icons type="closeempty" size="18" color="#fff"></uni-icons>
						<text style="font-size: small;">取消</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import psMethod from '@/common/psMethod';
	export default {
		data() {
			return {
				swiperH: 0,
				sConf: getApp().globalData,
				count: 0, // 记录数
				size: 50, // 页大小
				page: 1, // 当前页
				priceData: [], // 调价单
				curPrice: {
					start_time: this.hasDateTime(),
					over_time: null,
					is_level: 0, // 会员折扣
					is_fresh: 0, // 新人专享
					is_long: 1, // 长期有效
					money: 0,
					price: 0,
					setprice: 0
				},
				curFixRency: 0, // 结算价格
				curFixMoney: 0,
				curFixPrice: 0,
			}
		},
		mounted() {
			let window = uni.getWindowInfo();
			this.designLayout(window.windowHeight);
			this.curPrice.setprice = this.money
			this.curPrice.money = this.money
			this.curPrice.price = this.money
			this.curFixRency = (this.money / 100).toFixed(2)
			this.curFixMoney = (this.money / 100).toFixed(2)
			this.curFixPrice = (this.money / 100).toFixed(2)
			this.refresh()
		},
		props: {
			data: {
				type: Object,
				default: {
					money: 0,
					price: 0,
					only: 0
				}
			},
			pid: {
				type: Number,
				default: 0
			},
			gid: {
				type: Number,
				default: 0
			},
			money: {
				type: Number,
				default: 0
			}
		},
		methods: {
			designLayout(wh) {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.gl-media-view').boundingClientRect();
					query.exec((res) => {
						this.swiperH = wh - Math.ceil(res[0].top) - 80;
					});
				})
			},
			hasDateTime() {
				let now = new Date()
				return now.toLocaleString('chinese', {
					year: 'numeric',
					month: '2-digit',
					day: '2-digit',
					hour: '2-digit',
					minute: '2-digit',
					second: '2-digit'
				}).replace(/\//g, '-')
			},
			actionsClick(e) {
				console.log('actionsClick', e);
				if (e === 'reload') {
					this.refresh()
				} else if (e === 'new') {
					this.$refs.popupView.open()
				}
			},
			EventPopup(e) {
				console.log('EventPopup', e);
				if (e === 'save') {
					console.log(this.curPrice);
					if (this.curPrice.is_long === 0 && this.curPrice.over_time === null) {
						uni.showToast({
							title: '结束时间没有填'
						})
						return
					}
					if (this.curPrice.is_long === 0 && this.curPrice.over_time < this.curPrice.start_time) {
						uni.showToast({
							title: '结束时间已过期'
						})
						return
					}
					this.loadProductPricePost()
				}
			},
			EventPopupChange(e, t) {
				console.log('EventPopupChange', e, t);
				if (t === 'rency') {
					this.curPrice.setprice = Math.ceil(e * 100)
				}
				if (t === 'money') {
					this.curPrice.money = Math.ceil(e * 100)
				}
				if (t === 'price') {
					this.curPrice.price = Math.ceil(e * 100)
				}
				if (t === 'long') {
					this.curPrice.is_long = e.detail.value ? 1 : 0
				}
				if (t === 'level') {
					this.curPrice.is_level = e.detail.value ? 1 : 0
				}
				if (t === 'fresh') {
					this.curPrice.is_fresh = e.detail.value ? 1 : 0
				}
			},
			PopupClose() {
				this.$refs.popupView.close()
			},
			refresh() {
				console.log('refresh');
				this.loadProductPriceList()
			},
			async loadProductPriceList() {
				let host = this.sConf.host + '/admin/cargoPrice/';
				let token = this.sConf.auth.token || '';
				let data = {
					page: this.page,
					size: this.size,
					puid: this.gid,
					ordering: '-start_time'
				}
				let res = await psMethod.authenticatorGetSync(host, token, data)
				if (res.rescode === 200) {
					this.priceData = res.resmsg
					this.count = res.count;
					this.size = res.size;
				}
			},
			async loadProductPricePost() {
				let host = this.sConf.host + '/admin/cargoPrice/';
				let token = this.sConf.auth.token || '';
				let data = this.curPrice
				data.puid = this.gid
				let res = await psMethod.authenticatorPostSync(host, token, data)
				if (res.rescode === 200) {
					uni.showToast({
						title: '创建成功'
					})
					this.PopupClose()
					// this.$emit('reload')
					this.refresh()
				} else {
					uni.showToast({
						title: '创建失败'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>